import React from 'react';
import axios from 'axios';
import { Form, Select, Card } from 'antd';
import Dialog from '../../components/Dialog';

const { Option } = Select;

class Config extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      configList: [],
      typeList: [],
      levelList: []
    };
  }

  componentDidMount() {
    this.getAllConfig();
    this.getAllLevelAndType();
  }

  getAllLevelAndType = () => {
    axios.get('/aiOps/appConfig/alarmConfigs/alarmLevels').then((res) => {
      console.log('all level', res);
      const { data: levelList = [] } = res.data;
      this.setState({ levelList });
    });
    axios.get('/aiOps/appConfig/alarmConfigs/alarmTypes').then((res) => {
      console.log('all type', res);
      const { data: typeList = [] } = res.data;
      this.setState({ typeList });
    });
  };

  getAllConfig = () => {
    axios.get('/aiOps/appConfig/alarmConfigs').then((res) => {
      console.log('all config', res);
      const { data: configList = [] } = res.data;
      this.setState({ configList });
    });
  };

  setLevel = (id, level) => {
    console.log(this, id, level);
    axios.put(`/aiOps/appConfig/alarmConfigs/${id}/${level}`).then((res) => {
      Dialog({
        type: 'info',
        content: '告警等级设置成功！'
      });
    });
  };

  render() {
    const { configList, levelList } = this.state;
    return (
      <Card
      title="设置告警等级"
      bordered
      size="small"
      style={{
        width: '100%'
      }}
      >
        <Form
          // layout="horizontal"
          layout="inline"
        >
          {
          configList.map((item) => (
            <Form.Item size="large" key={item.id} label={item.alarmTypeValue}>
              <Select
                defaultValue={item.alarmLevel}
                // value={item.alarmLevel}
                style={{ width: 220 }}
                onChange={(val) => {
                  this.setLevel(item.id, val);
                }}
              >
                {
                  levelList.map((levelInfo) => (
                    <Option key={levelInfo.key} value={levelInfo.key}>{levelInfo.value}</Option>
                  ))
                }
              </Select>
            </Form.Item>
          ))
        }
        </Form>
      </Card>

    );
  }
}

export default Config;